<template>
	<view>
		<view v-if="!loading">
			<view v-if="articleInfo.publishStatus == 1">
				<view class="container">
					<view class="title">
						{{ articleInfo.title }}
					</view>
					<view class="tags">
						<text v-for="item in articleInfo.tagList" :key="item">{{ item.name }}</text>
					</view>

					<view class="content">
						<!-- <rich-text :nodes="articleInfo.content"></rich-text> -->
						<jyf-parser show-with-animation ref="articleRef" :tag-style="tagStyle"
							:html="articleInfo.content"></jyf-parser>
					</view>
					<view class="tips">
						本快讯所涉信息、数据可能来源于第三方，内容仅供参考，并不代表助融报告任何明示、暗示之观点或保证。如有任何疑问或需删除请联系助融报告官方客服。
					</view>
				</view>
				<!-- <view class="footer-main">
					<view class="row">
						<view class="tax" @click="articleLike">
							<view class="icon">
								<image
									:src="require(articleInfo.likeStatus ? '../static/attentionActive.png' : '../static/attention.png')"
									mode="scaleToFill" />
							</view>
							<view class="text-num">{{ Number(articleInfo.likeCount) + 200 }}</view>
						</view>
						<view class="tax" @click="articleCollect">
							<view class="icon">
								<image
									:src="require(articleInfo.collectStatus ? '../static/PersistentCollection.png' : '../static/articleCollectIcon.png')"
									mode="scaleToFill" />
							</view>
							<view class="text-num">{{ Number(articleInfo.collectCount) + 200 }}</view>
						</view>
					</view>
					<view>
						<button open-type="share" class="share-btn">立即分享</button>
					</view>
				</view> -->
			</view>
			<view v-else
				style="position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;">
				<image style="width: 535rpx;height: 269rpx" src="../static/noempty.png" alt="" />
				<authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
			</view>
		</view>
		<view v-else style="position: fixed;left: 50%; top: 50; transform: translate(-50%, -50%);">
			<uv-loading-icon :show="searchLoading" text="加载数据中...."></uv-loading-icon>
		</view>

		<authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>
<script>
import {
	getArticleDetailApi,
	articleLikeApi,
	articleCollectApi

} from '@/api/airticle.js'
import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
import Authorize from "@/components/Authorize.vue";
import {
	mapGetters
} from "vuex";
export default {
	components: {
		Authorize,
		jyfParser
	},
	data() {
		return {
			loading: false,
			content: '',
			articleInfo: {},
			id: '',
			isShowAuth: false,
			tagStyle: {
				img: 'width:100%;display:block;'
			},
			
		};
	},
	// #ifdef MP-WEIXIN
	onShareAppMessage: function (res) {
		if (res.from === 'button') {

		}
		return {
			title: this.articleInfo.title,
			path: `/pagesAircle/content/index?id=${this.id}`,
		}
	},
	// #endif
	computed: mapGetters(["isLogin"]),
	methods: {
		onLoadFun() {
			this.getArticleInfo()
		},
		authColse() {
			this.isShowAuth = false
		},
		articleLike() {
			if (!this.isLogin) return this.isShowAuth = true
			articleLikeApi({
				articleId: this.id
			}).then(res => {
				if(this.articleInfo.likeStatus) {
					this.articleInfo.likeCount --
				} else {
					this.articleInfo.likeCount ++
				}
				this.articleInfo.likeStatus = !this.articleInfo.likeStatus
			})
		},
		articleCollect() {
			if (!this.isLogin) return this.isShowAuth = true
			articleCollectApi({
				articleId: this.id
			}).then(res => {
				if(this.articleInfo.collectStatus) {
					this.articleInfo.collectCount --
				} else {
					this.articleInfo.collectCount ++
				}
				this.articleInfo.collectStatus= !this.articleInfo.collectStatus
			})
		},
		async getArticleInfo() {
			this.loading = true
			await getArticleDetailApi(this.id).then(res => {
				this.articleInfo = res.data;
			}).finally(v => {
				this.loading = false
			});
		},
	},
	async onLoad(options) {
		if (options.id) {
			this.id = options.id;
			this.getArticleInfo();
		}
	},
	onShow() {
		
	}
}
</script>
<style lang="scss">
page {
	background-color: #fff !important;

}

.container {
	margin: 30rpx;
	padding-bottom: 30rpx;
}

.title {
	font-weight: 600;
	font-size: 44rpx;
	color: #333333;

}

.tags {
	display: flex;
	margin-top: 20rpx;

	>text {
		background: #F6F9F8;
		border-radius: 6rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		margin-right: 20rpx;
		padding: 5rpx 10rpx;
	}
}

.content {
	margin-top: 50rpx;

}

.tips {
	margin-top: 30rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
}

.footer-main {
	position: fixed;
	bottom: 0rpx;
	left: 0;
	width: 100%;
	height: 166rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;

	.share-btn {
		width: 240rpx;
		height: 78rpx;
		background: #276FF7;
		border-radius: 12rpx;
		color: #FFFFFF;
	}

	.tax {
		text-align: center;
		margin-right: 30rpx;

		.icon {
			width: 40rpx;
			height: 38rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.text-num {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #999;
		}
	}
}
</style>